<template>
	<view class="">
		<u-sticky>
			<view class="border-t border-b bg-white pl-20 pr-20 pt-10 pb-10 flex align-center">
				<u-search 
					placeholder="请输入搜索的名称或编号" 
					v-model="searchData.name" 
					:disabled="isDisabled" 
					shape="square" 
					:showAction="false"
					:bgColor="isDisabled?'#fff':'#f7f7f7'"
					:focus="!isDisabled"
					borderColor="#f7f7f7"
					@click="isDisabled = false"
					@change="onSearch">
				</u-search>
				<text class="ml-20" v-if="!isDisabled" @click="onCancelSearch">取消</text>
			</view>
			<view class="bg-white">
				<u-tabs :list="menus" :scrollable="false" :current="current" lineHeight="1" lineWidth="45" @change="onTabs" lineColor="#e54d42"></u-tabs>
			</view>
		</u-sticky>
		<view class="my-list pl-0 pr-0 pb-162">
			<!-- @scrolltolower="scrolltolower" -->
			<!-- :height="swiperHeight" -->
			<!-- <u-list> -->
				<view v-for="(product, pdIx) in productList" :key="product.itemName" v-if="current===0">
					<view class="flex align-center padding-20 bg-white border-t" @click="onChange(pdIx, 'productList')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="product.isSelected?'icon-checkbox-circular-fill':'icon-checkbox-circular'" 
							:color="product.isSelected?'#e54d42':''"
							size="24"
						/>
						<view class="ml-20">
							<u-avatar :src="product.image" shape="square" size="60"></u-avatar>
						</view>
						<view class="ml-20">
							<view>{{product.itemName}}</view>
							<view class="line-red mt-10">￥ {{product.price}}</view>
						</view>
					</view>
				</view>
				<view v-for="(project, pjIx) in projectList" :key="project.itemName" v-if="current===1">
					<view class="flex align-center padding-20 bg-white border-t" @click="onChange(pjIx, 'projectList')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="project.isSelected?'icon-checkbox-circular-fill':'icon-checkbox-circular'" 
							:color="project.isSelected?'#e54d42':''"
							size="24"
						/>
						<view class="ml-20">
							<u-avatar :src="project.image" shape="square" size="60"></u-avatar>
						</view>
						<view class="ml-20">
							<view>{{project.itemName}}</view>
							<view class="line-red mt-10">￥ {{project.price}}</view>
						</view>
					</view>
				</view>
				<view v-for="(card, cardIx) in cardList" :key="card.itemName" v-if="current===2">
					<view class="flex align-center padding-20 bg-white border-t" @click="onChange(cardIx, 'cardList')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="card.isSelected?'icon-checkbox-circular-fill':'icon-checkbox-circular'" 
							:color="card.isSelected?'#e54d42':''"
							size="24"
						/>
						<view class="ml-20">
							<u-avatar :src="card.iamge" shape="square" size="60"></u-avatar>
						</view>
						<view class="ml-20">
							<view>{{card.itemName}}</view>
							<view class="line-red mt-10">￥ {{card.price}}</view>
						</view>
					</view>
				</view>
				<view v-for="(coupon, cpIx) in couponList" :key="coupon.itemName" v-if="current===3">
					<view class="flex align-center padding-20 bg-white border-t" @click="onChange(cpIx, 'couponList')">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="coupon.isSelected?'icon-checkbox-circular-fill':'icon-checkbox-circular'" 
							:color="coupon.isSelected?'#e54d42':''"
							size="24"
						/>
						<view class="ml-10">
							<view>{{coupon.itemName}}</view>
						</view>
					</view>
				</view>
				<view v-for="(apcard, apIx) in apcardList" :key="apcard.cardItemId" v-if="current===4">
					<view class="fweigh-600 padding-20">{{apcard.cardItemName}}</view>
					<view 
						class="flex align-center padding-20 bg-white border-t" 
						v-for="(im, ix) in apcard.children"
						:key="im.itemName"
						@click="onChange(apIx, 'apcardList', ix)">
						<uni-icons 
							custom-prefix="iconfont" 
							:type="im.isSelected?'icon-checkbox-circular-fill':'icon-checkbox-circular'" 
							:color="im.isSelected?'#e54d42':''"
							size="24"
						/>
						<view class="ml-10">
							<view>{{im.itemName}}</view>
							<view class="mt-6 fsize-26 line-grey">剩余: {{im.balance}} 次</view>
						</view>
					</view>
				</view>
				<u-empty :mode="!isDisabled?'search':'list'" v-if="current===0 && productList.length === 0" marginTop="200"/>
				<u-empty :mode="!isDisabled?'search':'list'" v-if="current===1 && projectList.length === 0" marginTop="200"/>
				<u-empty :mode="!isDisabled?'search':'list'" v-if="current===2 && cardList.length === 0" marginTop="200"/>
				<u-empty :mode="!isDisabled?'search':'list'" v-if="current===3 && couponList.length === 0" marginTop="200"/>
				<u-empty :mode="!isDisabled?'search':'list'" v-if="current===4 && apcardList.length === 0" marginTop="200"/>
			<!-- </u-list> -->
		</view>
		<view class="bottom-button pt-10">
			<view class="flex justify-between align-center">
				<view class="fsize-28 flex w-100">
					<text class="shink0 width-80">已选:</text>
					<view class="w-100 ml-10">
						<text v-if="productQuantity > 0">商品<text class="line-red">{{productQuantity}}</text>项;</text>
						<text v-if="cardQuantity > 0" class="ml-10">疗程卡<text class="line-red">{{cardQuantity}}</text>项;</text>
						<text v-if="projectQuantity > 0" class="ml-10">项目<text class="line-red">{{projectQuantity}}</text>项;</text>
						<text v-if="couponQuantity > 0" class="ml-10">优惠卷<text class="line-red">{{couponQuantity}}</text>项;</text>
						<text v-if="apcardQuantity > 0" class="ml-10">划卡项目<text class="line-red">{{apcardQuantity}}</text>项;</text>
					</view>
				</view>
				<view class="width-180 shink0 ml-10">
					<u-button color="#e54d42" text="确定" :disabled="selectedList.length === 0" @click="onEmit"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import date from '@/common/date.js'
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data(){
			return {
				current: 0,
				isDisabled: true,
				userId: null,
				menus:[
					{name:'商品', value: 1},
					{name:'项目', value: 11},
					{name:'疗程卡', value: 12},
					{name:'优惠券', value: 18},
					{name:'划卡项目', value: 0}
				],
				productList: [],
				projectList: [],
				cardList: [],
				couponList: [],
				apcardList: [],
				searchData:{
					name: '',
					page: 1,
					limit: 999
				},
				productQuantity: 0,
				projectQuantity: 0,
				cardQuantity: 0,
				couponQuantity: 0,
				apcardQuantity: 0,
				selectedList:[],
			}
		},
		onLoad(opt) {
			this.userId = opt.userId
			this.getData()
		},
		methods: {
			onCancelSearch(){
				this.isDisabled = true
				this.searchData.name = ""
			},
			onEmit(){
				uni.$emit('gift', this.selectedList)
				uni.navigateBack()
			},
			onTabs(e){
				this.current = e.index
			},
			onChange(ix, listName, jx){
				if(listName !== "apcardList"){
					this[listName][ix].isSelected = !this[listName][ix].isSelected
				}
				let list1 = []
				let list2 = []
				let list3 = []
				let list4 = []
				let list5 = []
				if(listName === 'productList'){
					list1 = this.productList.filter(im=>im.isSelected)
					this.productQuantity = list1.length
				}else if(listName === 'projectList'){
					list2 = this.projectList.filter(im=>im.isSelected)
					this.projectQuantity = list2.length
				}else if(listName === 'cardList'){
					list3 = this.cardList.filter(im=>im.isSelected)
					this.cardQuantity = list3.length
				}else if(listName === 'couponList'){
					list4 = this.couponList.filter(im=>im.isSelected)
					this.couponQuantity = list4.length
				}else if(listName === 'apcardList'){
					this[listName][ix].children[jx].isSelected = !this[listName][ix].children[jx].isSelected
					list5 = this.apcardList.flatMap(item => item.children).filter(child => child.isSelected)
					this.apcardQuantity = list5.length
				}
				const childrenArray = this.apcardList.map(item => item.children).flat()
				const combinedArray = [...this.productList, ...this.projectList, ...this.cardList, ...this.couponList, ...childrenArray]
				this.selectedList = combinedArray.filter(item => item.isSelected)
				// console.log("this.selectedList",combinedArray, this.selectedList)
			},
			getGoodsList(){
				this.$reqPost('GetGoodsPageList', {customerId:this.userId , ...this.searchData}).then(res => {
					this.productList = res.data.map(im=>{
						return {
							itemId: im.id,
							itemName: im.name,
							image: im.image,
							price: im.price,
							realPrice:im.realPrice,
							isSelected: this.selectedList.find(sl => sl.itemId === im.id) ? true : false,
							nums: 1,
							itemType: 1,
							validityDate: date.getDate(366),
						}
					})
				})
			},
			getProjectList(){
				this.$reqPost('CoreCmsProjectList', {customerId:this.userId , ...this.searchData}).then(res => {
					this.projectList = res.data.map(im=>{
						return {
							itemId: im.id,
							itemName: im.name,
							image: im.image,
							price: im.price,
							realPrice:im.realPrice,
							isSelected: this.selectedList.find(sl => sl.itemId === im.id) ? true : false,
							nums: 1,
							itemType: 11,
							validityDate: date.getDate(366),
						}
					})
				})
			},
			getProjectCategoryCardItemList(){
				this.$reqPost('ProjectCategoryCardItemList', {customerId:this.userId, ...this.searchData}).then(res => {
					this.cardList = res.data.map(im=>{
						return {
							itemId: im.id,
							itemName: im.name,
							image: im.shareImageUrl,
							price: im.salePrice,
							realPrice:im.realPrice,
							isSelected: this.selectedList.find(sl => sl.itemId === im.id) ? true : false,
							nums: 1,
							itemType: 12,
							validityDate: date.getDate(366),
						}
					})
				})
			},
			getPromotionList(){
				this.$reqPost('PromotionGetPageList', {...this.searchData, types: 2}).then(res => {
					this.couponList = res.data.map(im=>{
						return {
							itemId: im.id,
							itemName: im.name,
							isSelected: this.selectedList.find(sl => sl.itemId === im.id) ? true : false,
							nums: 1,
							itemType: 18,
							validityDate: date.getDate(366),
						}
					})
				})
			},
			getUserCardsList(){
				this.$reqJsonPost('UserCardsList', {id:this.userId, name: this.searchData.name}).then(res => {
					this.apcardList = res.data.map(im=>{
						im.children = im.items.map(jm=>{
							return {
								sourceId: jm.id,
								itemId: jm.projectId,
								itemName: jm.name,
								balance: jm.balance,
								isSelected: this.selectedList.find(sl => sl.itemId === jm.projectId) ? true : false,
								nums: 1,
								itemType: 21,
							}
						})
						return {cardItemName: im.cardItemName,cardItemId:im.cardItemId,children: im.children}
					})
				})
			},
			getData(){
				this.getGoodsList()
				this.getProjectList()
				this.getProjectCategoryCardItemList()
				this.getPromotionList()
				this.getUserCardsList()
			},
			onSearch(){
				if( this.current === 0 ){
					this.getGoodsList()
				}else if(this.current === 1){
					this.getProjectList()
				}else if(this.current === 2){
					this.getProjectCategoryCardItemList()
				}else if(this.current === 3){
					this.getPromotionList()
				}else if(this.current === 4){
					this.getUserCardsList()
				}
			}
		}
	}
</script>

<style>
</style>